<template>
  <el-container>
    <el-row>
      <el-col :span="24" class="headercontainer">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item index="/main/staffinfo">员工信息</el-menu-item>
          <el-menu-item index="/main/shopinfo">门店信息</el-menu-item>
          <el-menu-item index="/main/stafflogin">员工登录日志</el-menu-item>
          <el-menu-item index="/main/position">职位管理</el-menu-item>
          <!-- <el-menu-item index="/main/jurisdiction">权限管理</el-menu-item> -->
        </el-menu>
      </el-col>
    </el-row>
    <el-header>
      <div id="search">
        <div class="search-container">
          <div class="block">
            <span class="demonstration">搜索</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-button
              type="success"
              icon="el-icon-search"
              class="searchbtn"
              @click="Search"
              >查询</el-button
            >
          </div>
        </div>
      </div>
    </el-header>
    <el-main class="tablem">
      <div class="border">
        <div class="tablepad">
          <span style="margin-right: auto">员工信息</span>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-circle-plus-outline"
            @click="addbtn"
            >添加</el-button
          >
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="alldelete"
            >批量删除</el-button
          >
        </div>
        <div class="tablepad">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            class="fontsize"
            @selection-change="handleSelectionChange"
          >
            >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="员工编号"> </el-table-column>
            <el-table-column prop="name" label="名称"> </el-table-column>
            <el-table-column prop="phone" label="联系方式"></el-table-column>
            <el-table-column
              prop="store_name"
              label="所属门店"
            ></el-table-column>
            <el-table-column prop="created" label="入职时间"></el-table-column>
            <el-table-column prop="role_name" label="职位"></el-table-column>
            <el-table-column prop="password" label="登录密码"></el-table-column>
            <el-table-column label="操作" width="180px">
              <template slot-scope="obj">
                <el-button
                  type="warning"
                  icon="el-icon-edit"
                  plain
                  size="mini"
                  @click="modifibtn(obj.row.id)"
                  >修改</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  plain
                  icon="el-icon-delete"
                  @click="deletebtn(obj.row.id)"
                  >删除</el-button
                ></template
              ></el-table-column
            >
          </el-table>
        </div>
        <div class="page">
          <Page @shareData="shareData" :totalCount="count"></Page>
        </div>
      </div>
    </el-main>
    <el-dialog title="添加员工" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="员工头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://49.235.240.193:8080/admin/upload/image"
            name="image"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
          <el-input
            type="string"
            v-model="form.phone"
            autocomplete="off"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="所属门店"
          :label-width="formLabelWidth"
          prop="storeId"
        >
          <el-select v-model="form.storeId" placeholder="请选择">
            <el-option
              v-for="item in shoparr"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" :label-width="formLabelWidth" prop="roleId">
          <el-select v-model="form.roleId" placeholder="请选择">
            <el-option
              v-for="item in rolearr"
              :key="item.value"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="登录密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            v-model="form.password"
            autocomplete="off"
            style="width: 200px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer center">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addstaff">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改员工" :visible.sync="modifi">
      <el-form :model="midifiform" :rules="rules" ref="midifiform">
        <el-form-item label="员工头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://49.235.240.193:8080/admin/upload/image"
            name="image"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input
            v-model="midifiform.name"
            prop="midifiform.name"
            autocomplete="off"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
          <el-input
            v-model="midifiform.phone"
            autocomplete="off"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="所属门店"
          :label-width="formLabelWidth"
          prop="store_id"
        >
          <el-select v-model="midifiform.storeId" placeholder="请选择">
            <el-option
              v-for="item in shoparr"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" :label-width="formLabelWidth" prop="roleId">
          <el-select v-model="midifiform.roleId" placeholder="请选择">
            <el-option
              v-for="item in rolearr"
              :key="item.value"
              :label="item.role_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="登录密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            v-model="midifiform.password"
            autocomplete="off"
            style="width: 200px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer center">
        <el-button @click="modifi = false">取 消</el-button>
        <el-button type="primary" @click="modifistaff(midifiform)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import Page from "../../components/common/Pagination.vue";
export default {
  components: {
    Page,
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入员工名称", trigger: "blur" }],
        password: [
          { required: true, message: "请输入员工密码", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入员工电话", trigger: "blur" }],
        created: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "blur",
          },
        ],
        // shop: [{ required: true, message: "请选择门店", trigger: "blur" }],
        storeId: [{ required: true, message: "请选择门店", trigger: "blur" }],
        roleId: [{ required: true, message: "请选择职位", trigger: "blur" }],
      },
      tableData: [],
      multipleSelection: [],
      dialogFormVisible: false,
      modifi: false,
      form: {
        created: new Date().toJSON(),
        name: "",
        phone: "",
        shop: "",
        password: "",
        roleId: "",
        image: "string",
        ids: "",
        status: 0,
        username: "string",
      },
      midifiform: {
        created: new Date().toJSON(),
        name: "",
        phone: "",
        shop: "",
        password: "",
        roleId: "",
        image: this.imageUrl,
        ids: "",
        status: 0,
        username: "string",
      },
      formLabelWidth: "120px",
      value1: "",
      imageUrl: "",
      shoparr: [],
      rolearr: [],
      // 条数
      pageCount: 5,
      // 页数
      nowPage: 1,
      // 总条数
      count: 0,
      ids: "",
      startTime: "",
      endTime: "",
    };
  },

  methods: {
    // 分页函数
    shareData(v) {
      console.log(v);
      this.pageCount = v.pageCount;
      this.nowPage = v.nowPage;
      // console.log("条数" + this.pageCount);
      // console.log("页数" + this.nowPage);
      this.getall();
    },
    // 修改按钮
    modifibtn(v) {
      console.log(v);
      this.modifi = true;
      this.axios({
        method: "get",
        url: "/admin/" + v,
      }).then((res) => {
        console.log(res);
        this.midifiform = res.data.data;
        this.imageUrl=this.midifiform.image
        console.log(this.midifiform);
      });
    },
    // 修改确定按钮
    modifistaff(midifiform) {
      console.log();
      this.$refs.midifiform.validate((valid) => {
        if (valid) {
          // alert("submit!");
          this.modifi = false;
          this.midifiform.image=this.imageUrl
          console.log(this.midifiform);
          this.axios({
            method: "post",
            url: "/admin/update",
            data: this.midifiform,
          }).then((res) => {
            console.log(res);
            this.getall();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 批量删除选择id
    handleSelectionChange(val) {
      this.ids = [];
      this.multipleSelection = val;
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.ids.push(this.multipleSelection[i].id);
      }
      // console.log(this.ids);
    },
    // 删除按钮
    deletebtn(v) {
      this.$confirm("此操作将删除该员工, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.axios({
            method: "get",
            url: "/admin/delete/" + v,
          }).then((res) => {
            console.log(res);
            this.getall();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 搜索按钮
    Search() {
      this.startTime = this.value1[0].toJSON();
      this.endTime = this.value1[1].toJSON();
      this.axios({
        method: "post",
        url: "/admin/list",
        data: {
          endTime: this.endTime,
          limit: this.pageCount,
          page: this.nowPage,
          starTime: this.startTime,
          startIndex: 0,
        },
      }).then((res) => {
        console.log(res);
        this.count = res.data.count;
        this.tableData = [];
        this.tableData = res.data.data;
        for (let i = 0; i < res.data.data.length; i++) {
          this.tableData[i].created = this.timeTransfer(
            res.data.data[i].created
          );
        }
      });
    },
    // 删除所有
    alldelete() {
      // console.log("删除所有");
      this.$confirm("此操作将删除所有选中员工, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.axios({
            method: "post",
            url: "/admin/deleteByIds",
            data: {
              id: 0,
              ids: this.ids,
              image: "string",
              username: "string",
            },
          }).then((res) => {
            console.log(res);
            this.getall();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加按钮
    addbtn() {
      this.dialogFormVisible = true;
      this.imageUrl='',
      this.axios({
        method: "post",
        url: "/store/list",
        data: {
          page: 1,
          pageSize: 100,
        },
      }).then((res) => {
        // console.log(res.data.data);
        this.shoparr = res.data.data;
        console.log(this.shoparr);
      });
      this.axios({
        method: "post",
        url: "/role/list",
        data: {
          limit: 100,
          page: 1,
          roleName: "",
          startIndex: 0,
        },
      }).then((res) => {
        console.log(res.data.data);
        this.rolearr = res.data.data;
      });
    },
    // 添加员工
    addstaff() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // alert("submit!");
          this.dialogFormVisible = false;
          console.log("添加员工");
          this.form.image=this.imageUrl
          console.log(this.form);
          this.axios({
            method: "post",
            url: "/admin/add",
            data: this.form,
          }).then((res) => {
            console.log(res);
            this.getall()
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data;
      console.log(this.imageUrl);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 所有
    getall() {
      this.axios({
        method: "post",
        url: "/admin/list",
        data: {
          endTime: this.endTime,
          limit: this.pageCount,
          page: this.nowPage,
          starTime: this.startTime,
          startIndex: "",
        },
      }).then((res) => {
        console.log(res);
        this.count = res.data.count;
        this.tableData = [];
        this.tableData = res.data.data;

        // console.log(this.timeTransfer(res.data.data[0].created));
        for (let i = 0; i < res.data.data.length; i++) {
          this.tableData[i].created = this.timeTransfer(
            res.data.data[i].created
          );
        }
        // this.tableData.created=
        // console.log(this.tableData);
      });
      this.axios({
        method: "post",
        url: "/store/list",
        data: {
          page: 1,
          pageSize: 100,
        },
      }).then((res) => {
        // console.log(res.data.data);
        this.shoparr = res.data.data;
        // console.log(this.shoparr);
      });
      this.axios({
        method: "post",
        url: "/role/list",
        data: {
          limit: 100,
          page: 1,
          roleName: "",
          startIndex: 0,
        },
      }).then((res) => {
        // console.log(res.data.data);
        this.rolearr = res.data.data;
        // console.log(this.rolearr);
      });
    },
    // 转换时间
    timeTransfer(timestamp) {
      let time = new Date(timestamp);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minute = time.getMinutes();
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      return year + "-" + month + "-" + date + " " + hours + ":" + minute;
    },
  },
  created() {
    this.getall();
  },
};
</script>

<style lang='less' scoped>
.fontsize {
  font-size: 1.4rem;
  font-weight: normal;
}
#search {
  border: rgb(204, 203, 203) solid 1px;
  background-color: white;
  padding: 5px;
}
.search-container {
  // border: 1px solid red;
  background-color: #f5f9fc;
  padding: 5px;
}
.block {
  font-size: 1.4rem;
}
.demonstration {
  margin-right: 20px;
}
.container {
  border: 1px solid black;
}
.headercontainer {
  padding: 20px;
}
.tablem {
  margin-top: 5px;
}
.border {
  padding: 10px;
  border: rgb(207, 205, 205) solid 1px;
  background-color: white;
}
.tablepad {
  font-size: 1.4rem;
  margin: 5px;
  padding: 5px;
  background-color: #f5f9fc;
  display: flex;
  justify-content: flex-end;
}
.page {
  font-size: 1.4rem;
  margin: 5px;
  padding: 5px;
  background-color: #f5f9fc;
}
.avatar-uploader {
  border: 1px dashed #000000;
  border-radius: 6px;
  cursor: pointer;
  width: 178px;
  height: 178px;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #0475e7;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.searchbtn {
  margin-left: 20px;
}
.center {
  text-align: center;
}
</style>